<template>
  <div class="back-nav" :style="navStyle">
    <img src="./../assets/back.svg" @click="back" class="back-btn">
    <div class="title">{{title}}</div>
  </div>
</template>

<script>
  export default {
    name: "BackNav",
    props: {
      navBg: {
        type: String,
        default: 'rgba(34, 40, 49, 0.5)'
      },
      title: {
        type: String,
        default: ''
      }
    },
    data(){
      return {
        navStyle: {
          background: 'rgba(34, 40, 49, 0.5)'
        }
      };
    },
    watch: {
      navBg: {
        immediate: true,
        handler(val){
          this.navStyle.background = val
        }
      }
    },
    methods: {
    back(){
      this.$router.go(-1);
    }
    }
  }
</script>

<style scoped lang="scss">
  .back-nav{
    width: 100%;
    height: 50px;
    position: fixed;
    z-index: 99;
    .back-btn{
      width: 20px;
      height: 20px;
      position: absolute;
      top: 10px;
      left: 5px;
      z-index: 2;
    }
    .title{
      width: 100%;
      height: 100%;
      color: white;
      font-size: 0.38rem;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
    }
  }
</style>